<template>
  <div>
    <div class="loginpage">
      <div class="logotag">
        <img height="50" src="LOGO.png" />
      </div>

      <!--登陆界面-->
      <div style="margin-top: 25px" v-if="changemode">
        <a-form
          :model="loginEntity"
          :label-col="labelCol"
          :wrapper-col="wrapperCol"
          @finish="login"
        >
          <div>
            <a-form-item
                label="账号: "
                class="loginitem"
                :rules="[{ required: true, message: '请输入邮箱或账号' }]"
            >
              <a-input
                class="logininput"
                v-model:value="loginEntity.u_account"
              />
            </a-form-item>
            <a-form-item
                label="密码: "
                class="loginitem"
                :rules="[{ required: true, message: '请输入密码' }]"
            >
              <a-input-password class="logininput" v-model:value="loginEntity.u_pwd" />
            </a-form-item>
          </div>
          <a-form-item
            :wrapper-col="{ span: 14, offset: 4 }"
            class="loginitem-buttons"
          >
            <div @click="beReg" class="changemodel">没有账户，注册</div>
            <a-button
                type="primary"
                :disabled="disabled"
                class="login-button"
                html-type="submit"
              >
              登录
            </a-button>
          </a-form-item>
        </a-form>
      </div>

      <!--注册界面-->
      <div style="margin-top: 25px" v-else>
        <a-form
          :model="registerEntity"
          :label-col="labelCol"
          :wrapper-col="wrapperCol"
          @finish="register"
        >
          <div>
            <a-form-item
                label="邮箱: "
                class="loginitem"
                :rules="[{ required: true, message: '请输入邮箱' }]"
            >
              <a-input
                class="logininput"
                v-model:value="registerEntity.email"
              />
            </a-form-item>
            <a-form-item
                label="账号: "
                class="loginitem"
                :rules="[{ required: true, message: '请输入账户名' }]"
            >
              <a-input
                class="logininput"
                v-model:value="registerEntity.account"
              />
            </a-form-item>
            <a-form-item
                label="密码: " class="loginitem"
                :rules="[{ required: true, message: '请输入密码' }]"
            >
              <a-input-password class="logininput" v-model:value="registerEntity.passwd" />
            </a-form-item>
          </div>
          <a-form-item
            :wrapper-col="{ span: 14, offset: 4 }"
            class="loginitem-buttons"
          >
            <div @click="beLogin" class="changemodel"
              >已有帐户，返回登录界面</div
            >
            <a-button
              type="primary"
              class="login-button"
              style="margin-left: 10px"
              :disabled="disabled"
              html-type="submit"
              >注册</a-button
            >
          </a-form-item>
        </a-form>
      </div>
    </div>
  </div>
</template>

<script>
import {computed, defineComponent, reactive, toRaw} from "vue";
import { get, post, setLocalToken, tip } from "@/common";
import { useRouter } from "vue-router";
import { ref } from "vue";

export default defineComponent({
  data(){
    const changemode = ref(true);

    const loginEntity = reactive({
      u_account: "",
      u_pwd: "",
    });

    const registerEntity = reactive({
      account: "",
      email: "",
      passwd:""
    });
    const disabled = computed(()=>{
      if(this.changemode){
        return !(loginEntity.u_account&&loginEntity.u_pwd);
      }else {
        return !(registerEntity.account&&registerEntity.email&&registerEntity.passwd);
      }
    })

    return {
      changemode,
      loginEntity,
      registerEntity,
      labelCol: {
        span: 4,
      },
      wrapperCol: {
        span: 14,
      },
      disabled,
      router: useRouter(),
    }
  },
  methods: {
    beLogin() {
      this.changemode = true
    },

    beReg() {
      this.changemode = false
    },
    login(){
      console.log("login!", toRaw(this.loginEntity));
      post("/login", this.loginEntity).then((res) => {
        tip.success("登录成功！");
        const token = res.data;
        setLocalToken(token);
        this.router.push({path: "/home"});
      });
    },

    register() {
      post("/register", this.registerEntity).then((res)=>{
        tip.success("注册成功!");
        setLocalToken(res.data);
        this.router.push({path: "/home"});
      })
    }

  },
  setup() {
  },
});
</script>

<style>
body {
  background: url("https://s1.ax1x.com/2022/07/13/jWChi8.png") no-repeat;
}

.changemodel {
  cursor: pointer;
  color: cornflowerblue;
  padding: 10px;
}

.logotag {
  height: 40px;
  width: auto;
  display: flex;
  align-items: center;
  padding: 0px 40px 20px;
}

.loginpage {
  background-color: rgb(252, 252, 252);
  height: 370px;
  width: 420px;
  margin-left: 61%;
  padding: 40px 0px 10px;
  margin-top: 10%;
  margin-right: 30px;
  border-radius: 5px;
}

.loginitem {
  width: 400px;
  display: flex;
  align-items: center;
  text-align: center;
  margin-left: 6%;
  padding: 0px 20px 0px;
}

.loginitem-buttons {
  text-align: center;
  padding: 0px 0px 0px;
}

.login-button {
  width: 270px;
  float: left;
}

.logininput {
  margin-left: 10px;
}
</style>